<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>购物车</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="styles.css" />
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/gwc.js"></script>
</head>
<style>
.flowBox {
	padding-bottom: 5px;
	margin-left: 1px;
	width: 99.5%;
}

.flowBox table {
	margin: 5px auto;
}

h6 span {
	float: left;
	padding-left: 15px;
	font-size: 14px;
}

.flowBox h6 {
	width: 92%;
	background: #ececec;
	color: #666666;
	font-weight: bold;
	margin-left: 43px;
}

.flowGoodsFittings ul {
	height: 1%;
	margin: 5px 8px;
	width: 222px;
	margin-left: 50px;
	float: left;
}

.flowGoodsFittings li.goodsimg {
	width: 220px;
	margin-right: 10px;
}

.flowGoodsFittings li {
	width: 222px;
	font-size: 12px;
	line-height: 22px;
	float: left;
	padding: 5px, 5px, 5px, 5px;
}

.flowGoodsFittings li.goodsimg img {
	width: 220px;
	height: 220px;
	display: block;
}
/*表格中的数据样式*/
.cfs {
	width: 10%;
}

.cfs a {
	cursor: pointer;
}

#cxsdd {
	text-align: center;
}

#cxsdd td {
	height: 35px;
}

#xianss {
	height: 40px;
	line-height: 40px;
	margin-left: 45px;
}

#in_num, #sp_num {
	color: red;
	font-weight: bold;
	font-size: 20px;
	padding: 0 5px;
}

.lskdo {
	width: 40px;
	text-align: center;
}

.text_box {
	border: 1px solid #ececec;
	width: 30%;
	height: 18px;
}

.min {
	width: 15%;
	height: 20px;
	margin-left: 30px;
}

.add {
	width: 15%;
	height: 20px;
}

.check-one check {
	margin-left: 20px;
}

.clear {
	border: 1px #ececec solid;
	font-size: 12px;
	font-weight: bold;
	padding: 3px 15px;
	background: #ececec;
	color: black;
	border-radius: 5px;
}

.sc {
	border: 1px #ececec solid;
	font-size: 12px;
	font-weight: bold;
	padding: 3px 15px;
	background: #ececec;
	color: black;
	border-radius: 5px;
}

#submit {
	border: 1px #e6e6e6 solid;
	width: 10%;
	height: 40px;
	margin-left: 845px;
	margin-top: 20px;
}
</style>
<body style="min-width: 980px;">
	<div id="main_top">
		<jsp:include page="headarea.jsp"></jsp:include>
	</div>
	<div class="navwrape">
		<div id="nave">
			<div class="navbare clearfix">
				<a class="currente" href="menu_listservlet">首页</a> <a
					href="Close_List">衣服</a> <a href="Shose_List">鞋靴</a> <a
					href="Pant_List">裤子</a>
			</div>
		</div>
		<div class="block box">
			<div class="blank"></div>
			<div id="ur_here" style="margin-left: 60px">
				当前位置: <a href="menu_listservlet">首页</a>
				<code>&gt;</code>
				购物流程
			</div>
		</div>
		<div class="catbox"
			style="border: 1px solid #ececec; margin-top: 10px; margin-left: 40px; height: 540px;">
			<table id="cartTable">
				<h3 style="width: 97.3%;">
					<span>商品列表</span>
				</h3>
				<thead>
					<tr>
						<th><label> <input class="check-all check"
								type="checkbox" />&nbsp;&nbsp;全选
						</label></th>
						<th>商品</th>
						<th>售价</th>
						<th>数量</th>
						<th>小计</th>
						<th>颜色</th>
						<th>尺寸</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${gwc}" var="f">
						<tr>
							<td class="checkbox"><input class="check-one check"
								type="checkbox" /></td>
							<td class="goods"><img src="${f.value.uiImage }" /><span>${f.value.cName}
							</span></td>
							<td class="price">${f.value.dPrice }</td>
							<td class="count"><span class="reduce"> </span> <input
								class="count-input" type="text" value="1" /> <span class="add">+</span></td>
							<td class="subtotal">${f.value.dPrice*f.value.count}</td>
							<td style="width: 10%">${f.value.coName}</td>
							<td style="width: 10%">${f.value.sName}</td>
							<td class="operation"><span class="delete">删除</span></td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
			<div class="foot" id="foot">
				<label class="fl select-all"><input type="checkbox"
					class="check-all check" />&nbsp;&nbsp;全选</label> <a class="fl delete"
					id="deleteAll" href="javascript:;">删除</a>
				<form></form>
				<div class="fr total">
					合计：￥<span id="priceTotal">0.00</span>
				</div>
				<div class="fr selected" id="selected">
					已选商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span
						class="arrow down">︾</span>
				</div>
				<div class="selected-view">
					<div id="selectedViewList" class="clearfix">
						<div>
							<img src="images/1.jpg"><span>取消选择</span>
						</div>
					</div>
					<span class="arrow">◆<span>◆</span></span>
				</div>
			</div>
			<form action="CartJsSevrlet" method="post">
				<c:forEach items="${gwc}" var="f">
					<input type="hidden" value="${f.value.cId}" name="cId">
					<input type="hidden" value="${f.value.cName }" name="cName">
					<input type="hidden" value="${f.value.dPrice }" name="dPrice">
					<input type="hidden" value="${f.value.count }" name="count">
				</c:forEach>
				<input type="submit" value="结算中心" id="submit">
			</form>
		</div>
		<div class="block" style="margin-top: 130px;">
			<div class="flowBox">
				<h6 style="margin-top: 30px;">
					<span>商品相关配件</span>
				</h6>
				<form action="" method="post">
					<div class="flowGoodsFittings clearfix"
						style="padding: 5px; margin-top: 5px; margin-left: 50px;">
						<ul class="clearfix" style="height: 320px;">
							<li class="goodsimg"><a href="commdity_servlet?cId=1"
								target="_blank"><img src="images/f1.jpg" alt=""
									class="B_blue" /></a></li>
							<li>
								<p>
									<a href="commdity_servlet?cId=1" target="_blank"
										title="条纹t-shrit" class="B_blue">条纹t-shirt</a>
								</p> 配件价格：<font class="f1">￥45元</font><br /> <a
								href="Product?cId=${list.cId}"><img src="images/bnt_buy.gif"
									alt="立即购买" /></a>
							</li>
						</ul>
						<ul class="clearfix" style="height: 320px;">
							<li class="goodsimg"><a href="commdity_servlet?cId=2"
								target="_blank"><img src="images/f149.jpg" alt=""
									class="B_blue" /></a></li>
							<li>
								<p>
									<a href="commdity_servlet?cId=2" target="_blank"
										title="套装女...." class=" ">套装女....</a>
								</p> 配件价格：<font class="f1">￥95元</font><br /> <a
								href="Product?cId=${list.cId}"><img src="images/bnt_buy.gif"
									alt="立即购买" /></a>
							</li>
						</ul>
						<ul class="clearfix" style="height: 320px;">
							<li class="goodsimg"><a href="commdity_servlet?cId=3"
								target="_blank"><img src="images/f162.jpg" alt=""
									class="B_blue" /></a></li>
							<li>
								<p>
									<a href="commdity_servlet?cId=3" target="_blank" title="雪地靴长筒"
										class=" ">雪地靴长筒</a>
								</p> 配件价格：<font class="f1">￥65元</font><br /> <a
								href="Product?cId=${list.cId}"><img src="images/bnt_buy.gif"
									alt="立即购买" /></a>
							</li>
						</ul>
						<ul class="clearfix" style="height: 320px;">
							<li class="goodsimg"><a href="commdity_servlet?cId=83"
								target="_blank"><img src="images/f171.jpg" alt=""
									class="B_blue" /></a></li>
							<li>
								<p>
									<a href="commdity_servlet?cId=83" target="_blank" title="男士运动服"
										class=" ">男士运动服</a>
								</p> 配件价格：<font class="f1">￥100元</font><br /> <a
								href="Product?cId=${list.cId}"><img src="images/bnt_buy.gif"
									alt="立即购买" /></a>
							</li>
						</ul>
						<ul class="clearfix" style="height: 320px;">
							<li class="goodsimg"><a href="commdity_servlet?cId=4"
								target="_blank"><img src="images/f175.jpg" alt=""
									class="B_blue" /></a></li>
							<li>
								<p>
									<a href="commdity_servlet?cId=4" target="_blank"
										title="平底靴女..." class=" ">平底靴女...</a>
								</p> 配件价格：<font class="f1">￥45元</font><br /> <a
								href="Product?cId=${list.cId}"><img src="images/bnt_buy.gif"
									alt="立即购买" /></a>
							</li>
						</ul>
						<ul class="clearfix" style="height: 320px;">
							<li class="goodsimg"><a href="commdity_servlet?cId=5"
								target="_blank"><img src="images/f176.jpg" alt=""
									class="B_blue" /></a></li>
							<li>
								<p>
									<a href="commdity_servlet?cId=5" target="_blank"
										title="高跟短靴..." class=" ">高跟短靴...</a>
								</p> 配件价格：<font class="f1">￥40元</font><br /> <a
								href="Product?cId=${list.cId}"><img src="images/bnt_buy.gif"
									alt="立即购买" /></a>
							</li>
						</ul>
						<ul class="clearfix" style="height: 320px;">
							<li class="goodsimg"><a href="commdity_servlet?cId=12"
								target="_blank"><img src="images/f180.jpg" alt=""
									class="B_blue" /></a></li>
							<li>
								<p>
									<a href="commdity_servlet?cId=12" target="_blank"
										title="系带高跟长靴女..." class=" ">系带高跟长靴女...</a>
								</p> 配件价格：<font class="f1">￥90元</font><br /> <a
								href="Product?cId=${list.cId}"><img src="images/bnt_buy.gif"
									alt="立即购买" /></a>
							</li>
						</ul>
					</div>
				</form>
			</div>
		</div>
		<div id="end_div">
			<jsp:include page="end.jsp"></jsp:include>
		</div>
</body>
</html>